<template>
  <div>
    
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      v-show="scene === 1"
    >
      <el-row :gutter="20">
        <el-col :span="1" :offset="0">
          <el-button type="primary" size="default" @click="addteacherlist" :disabled="isoktockick"
            >添加</el-button
          >
        </el-col>
        <el-col :span="1" :offset="0">
          <el-button
            type="primary"
            size="default"
            @click="byidgetlistdata(backid)"
            >查询</el-button
          >
        </el-col>
        <el-col :span="8" :offset="0">
          <el-input
            v-model="backid"
            placeholder="查询用户编号.."
            size="normal"
            clearable
            @change="changeinput"
          ></el-input>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="24"> 
      <el-col :span="24" >
            <el-card shadow="always" >
               <barChart ></barChart>
             </el-card>
        </el-col>
    </el-row>
    <!-- 会员表格 -->
    <el-table :data="listdata" border stripe v-show="scene === 1" >
      <el-table-column type="index" prop="col.id" label="序号" :width="80">
      </el-table-column>
      <el-table-column prop="col.id" label="用户编号" width="120">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.userid }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="模式" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.orderDescription }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="金额" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            ¥{{ row.orderSum }}.00
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="支付时间" width="width">
        <template slot-scope="{ row, $index }">
          <div class="truncate">
            {{ row.timestamp }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="有效期" width="width">
        <template slot-scope="{ row, $index }">
          <div class="truncate">
            {{ row.payee }}
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            <el-button
              v-show="! (row.state == 0)"
              type="success"
              size="mini"
              icon="el-icon-finished"
              circle
              :disabled="! (row.state == 0)"
            ></el-button>
            <el-button
              v-show=" (row.state == 0)"
              type="danger"
              size="mini"
              icon="el-icon-refresh-left"
              circle
              :disabled=" (row.state == 0)"
            ></el-button>

            <el-button
              type="warning"
              size="mini"
              circle
              icon="el-icon-edit"
              @click="showshopdetail(row)"
            ></el-button>
            <el-button
              type="info"
              size="mini"
              circle
              icon="el-icon-info"
              @click="maintenance(row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              circle
              icon="el-icon-delete"
              @click="deletebut(row)"
            >
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 用户信息情况 -->
    <el-drawer
      style="font-size: 30px; color: #000"
      title="用户信息情况:"
      :visible.sync="drawer"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="6">用户编号</el-col>
        <el-col :span="16" style="color: #399cff">
          {{ showparentdata.userid }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6">商家信息</el-col>
        <el-col :span="16">
          {{ showparentdata.orderName }} </el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6">收款账户</el-col>
        <el-col :span="16" >
           {{showparentdata.payee}}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6">支付方式</el-col>
        <el-col :span="16" style="color: #86de74">
          {{ showparentdata.method? '已支付':"未支付" }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6">商品描述</el-col>
        <el-col :span="16" style="color: #399cff">
          {{ showparentdata.orderDescription }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6">支付状态</el-col>
        <el-col :span="16" style="color: #399cff">
          {{ showparentdata.state }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6">开通会员日期</el-col>
        <el-col :span="16" style="color: #cb0000">
          {{ showparentdata.timestamp }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6">开通时长</el-col>
        <el-col :span="16" style="color:#cb0000">
          {{ showparentdata.sum }}天</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6">有效期</el-col>
        <el-col :span="16" style="color:#cb0000">
          {{ showparentdata.leavtime }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6">用户总消费</el-col>
        <el-col :span="16" style="color: #399cff">
          ¥{{ showparentdata.paymoney }}.00
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">订单号码</el-col>
        <el-col :span="16" style="color:#881280">
          {{ showparentdata.orderid }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">账单号码</el-col>
        <el-col :span="16" style="color: #881280">
          {{ showparentdata.trade_no }}
        </el-col>
      </el-row>
    </el-drawer>
    <!-- 具体账单查看 -->
    <el-drawer
      style="font-size: 30px; color: #000"
      title="会员订单情况:"
      :visible.sync="drawer2"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="5">用户编号</el-col>
        <el-col :span="16" >
          {{ showparentdata.userid }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">收款方</el-col>
        <el-col :span="16" style="color: #ff0a0a">
          {{ showparentdata.orderName }} {{showparentdata.payee}}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">支付方式</el-col>
        <el-col :span="16" style="color: #ff0a0a">
          {{ showparentdata.method }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">描述</el-col>
        <el-col :span="16" >
          {{ showparentdata.orderDescription }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">支付状态</el-col>
        <el-col :span="16" >
          {{ showparentdata.state? '已支付':'未支付' }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">开通时间</el-col>
        <el-col :span="16" >
          {{ showparentdata.thetime }}天</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">金额</el-col>
        <el-col :span="16" 
          >¥{{ showparentdata.orderSum }}.00
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">账单编号</el-col>
        <el-col :span="16" >
          {{ showparentdata.orderid }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">订单编号</el-col>
        <el-col :span="16">
            {{showparentdata.trade_no}}
        </el-col>
      </el-row>
    </el-drawer>
   
  </div>
</template>

<script>
import barChart from './barChart/index.vue'
export default {
  name: "",
  data() {
    return {
        isoktockick:false,
      listdata_r: [],
      listdata: [],
      listselect: "",
      isSale: true,
      drawer: false, //抽屉展示与隐藏
      drawer2:false,
      direction: "rtl",
      backid: "",
      showcontent: "",
      showparentdata: {},
      scene: 1,
      rules: {
        backid: {
          rule: /^[0-9]+$/,
          msg: "输入异常..",
        },
      },
      photolist:[],
      tempbackid:0
    };
  },
 components:{
  barChart
 },
  methods: {
    //正则校验
    validate(key) {
      let bool = true;
      if (!this.rules[key].rule.test(this[key])) {
        this.$message({
          message: this.rules[key].msg,
          type: "warning",
        });
        bool = false;
        return bool;
      }
      return bool;
    },
    gobackscene(){
        this.scene =1;
        this.getlistdata()
    },
    //展开详细详情:
    async showshopdetail(row) {
      console.log(this.$store.state.user.buttons.indexOf('btn.member.show'));
      if(this.$store.state.user.buttons.indexOf('btn.member.show') !== -1){
        this.drawer2 = true;
      this.showparentdata = row;
       
      }else{
        this.$message({
            type:"error",
            message:"权限不够禁止操作"
        })
      }
      
    //   let result = await this.$API.feedbackall.byidgetfeedbackall(
    //     row.backid || row
    //   );
    //   if (result.code === 200) {
    //     this.showparentdata = result.data;
    //     this.clockphotolist(this.showparentdata)

    //   }else{
    //     this.showparentdata = row;
    //     this.clockphotolist(this.showparentdata)
    //   }
    },
    //开发维护
    maintenance(row) {
      if(this.$store.state.user.buttons.indexOf('btn.member.edit') != -1){
        this.$message({
            type:"warning",
            message:"亲,づ╭❤～开发维护中"
        })
      }else{
         this.$message({
            type:"error",
            message:"权限不够禁止操作"
        })
      }
       
    },
    //删除按钮的回调
    deletebut(row) {
      if(this.$store.state.user.buttons.indexOf('btn.member.delete') != -1){
        this.$message({
            type:"warning",
            message:"亲,づ╭❤～开发维护中"
        })
      }else{
         this.$message({
            type:"error",
            message:"权限不够禁止操作"
        })
      }
    },
    //获取所有会员数据:
    async getlistdata() {
      let result = await this.$API.member.getmember();
      if (result.code === 200) {
        this.listdata = result.data;
      }
    },
    //根据id号查询数据:
    async byidgetlistdata(backid) {
      if (!this.validate("backid")) {
        this.getlistdata();
        return;
      } else {
        let result = await this.$API.member.byuseridgetdata(backid);
        if (result.code === 200) {
            this.drawer = true;     
            console.log(result);
            this.showparentdata = result.data[0];
        }
      }
    },
    //发起修改保存回调
    savecontent() {
        this.$message({
            type:"error",
            message:"权限不够禁止添加"
        })
    },
    //确认关闭？
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changeinput(value) {},
    //点击增加按钮回调:
    addteacherlist() {
        this.$message({
            type:"error",
            message:"权限不够禁止添加"
        })
        this.isoktockick = true
    },
  },
  mounted() {
    this.getlistdata();
  },
  computed: {},
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.truncate {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 200px; /* 设置宽度 */
}
.el-row .el-col-5 {
  font-size: 18px;
  text-align: right;
}
.el-col {
  margin: 10px 10px;
  font-size: 14px;
  align-content: center;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
